var rowTapUp = document.querySelector(".row_tap_up");
var rowTapDown = document.querySelector(".row_tap_down");
var rowTapItem = document.querySelectorAll(".row_tap_item li");
var rowShow = document.querySelectorAll(".row_show_img>img");
var loupe = document.querySelectorAll(".loupe>img");
var cover = document.querySelector(".cover");
var rowShowImg = document.querySelector(".row_show_img");
var row_index = 0;
rowTapDown.onclick = function() {
	row_index++;
	if (row_index > rowTapItem.length - 1) {
		row_index = 0;
	}
	tapProduct(row_index);
}
rowTapUp.onclick = function() {
	row_index--;
	if (row_index < 0) {
		row_index = rowTapItem.length - 1;
	}
	tapProduct(row_index);
}

Array.from(rowTapItem).forEach(function(item, index) {
	item.onmouseover = function() {
		row_index = index;
		tapProduct(index);
	}
})

function tapProduct(row_index) {
	Array.from(rowTapItem).forEach(function(item, index) {
		item.classList.remove("row_tap_style");
		rowShow[index].style.display = "none";
		loupe[index].style.display = "none";
	})
	rowTapItem[row_index].classList.add("row_tap_style");
	rowShow[row_index].style.display = "block";
	loupe[row_index].style.display = "block";
}

//放大镜
var row = document.querySelector(".row_show");
var loupeImg = document.querySelectorAll(".loupe>img");
rowShowImg.onmousemove = function(e) {
	var left = e.clientX;
	var top = e.clientY;
	cover.style.top = top - row.offsetTop - cover.offsetWidth / 2 + document.documentElement.scrollTop + "px";
	cover.style.left = left - row.offsetLeft - cover.offsetHeight / 2 + "px";

	if (cover.offsetTop < 0) {
		cover.style.top = 0;
	};
	if (cover.offsetLeft < 0) {
		cover.style.left = 0;
	};
	if (cover.offsetTop > rowShowImg.offsetHeight - cover.offsetHeight) {
		cover.style.top = rowShowImg.offsetWidth - cover.offsetWidth + "px";
	};
	if (cover.offsetLeft > rowShowImg.offsetWidth - cover.offsetWidth) {
		cover.style.left = rowShowImg.offsetWidth - cover.offsetWidth + "px";
	};
	Array.from(loupeImg).forEach(function(item) {
		item.style.top = "-" + parseFloat(cover.style.top) * 2 + "px";
		item.style.left = "-" + parseFloat(cover.style.left) * 2 + "px";
	})
}
var loupepa = document.querySelector(".loupe")
cover.onmouseout = function() {
	loupepa.style.display = "none"
}
cover.onmouseover = function() {
	loupepa.style.display = "block"
}

var choose_regions = document.querySelector(".choose_regions");
var address;
var province = document.querySelector(".province");
var city = document.querySelector(".city");
var district = document.querySelector(".district");
var subdistrict = document.querySelector(".subdistrict");
var cityname = document.querySelectorAll(".linkage_content>ul")
var linkage = document.querySelector(".linkage")

var linkage_title = document.querySelectorAll(".linkage_title li");
var address_name = document.querySelectorAll(".address_name li");
var cityarr = [];
var districtarr = [];
var subdistrictarr = [];

var upicon = document.querySelector(".upicon");
var downicon = document.querySelector(".downicon");
upicon.onclick = function() {
	this.style.display = "none";
	linkage.style.display = downicon.style.display = "block";
}
downicon.onclick = function() {
	linkage.style.display = this.style.display = "none";
	upicon.style.display = "block";
}
document.onclick = function(e) {
	console.log()
	if (e.target.className !== "main") {
		return;
	}
	linkage.style.display = "none";
}

function provincelinkage() {
	address.forEach(function(item) {
		var li = document.createElement("li");
		li.setAttribute("class", "fl");
		li.innerText = item.name;
		province.appendChild(li);
	})
	citylinkage();
}
provincelinkage();

function citylinkage() {
	Array.from(province.children).forEach(function(item, index) {
		item.onclick = function() {
			cityarr = address[index].childs;
			city.innerHTML = "";
			Array.from(cityarr).forEach(function(item) {
				var li = document.createElement("li");
				li.setAttribute("class", "fl");
				li.innerText = item.name;
				city.appendChild(li);
			})
			districtlinkage(cityarr);
			linkage_title[0].innerText = address_name[0].innerText = this.innerText;
			tapcity(0);
		}
	})
}

function districtlinkage(cityarr) {
	Array.from(city.children).forEach(function(item, index) {
		item.onclick = function() {
			districtarr = cityarr[index].childs;
			district.innerHTML = "";
			Array.from(districtarr).forEach(function(item) {
				var li = document.createElement("li");
				li.setAttribute("class", "fl");
				li.innerText = item.name;
				district.appendChild(li);
			})
			subdistrictlinkage(districtarr);

			linkage_title[1].innerText = address_name[1].innerText = this.innerText;
			tapcity(1);
		}
	})
}

function subdistrictlinkage(districtarr) {
	Array.from(district.children).forEach(function(item, index) {
		item.onclick = function() {
			subdistrictarr = districtarr[index].childs;
			subdistrict.innerHTML = "";
			Array.from(subdistrictarr).forEach(function(item) {
				var li = document.createElement("li");
				li.setAttribute("class", "fl");
				li.innerText = item.name;
				subdistrict.appendChild(li);
			})
			linkage_title[2].innerText = address_name[2].innerText = this.innerText;
			tapcity(2);
			deliveryaddress();
		}
	})
}

function deliveryaddress() {
	Array.from(subdistrict.children).forEach(function(item, index) {
		item.onclick = function() {
			linkage.style.display = "none";
			linkage_title[3].innerText = address_name[3].innerText = this.innerText;
		}
	})
}


Array.from(linkage_title).forEach(function(item, index) {
	item.onclick = function() {
		Array.from(linkage_title).forEach(function(item) {
			item.classList.remove("linkageStyle");
		});
		Array.from(cityname).forEach(function(item) {
			item.style.display = "none";
		});
		this.classList.add("linkageStyle");
		cityname[index].style.display = "block";
	};
});

function tapcity(index) {
	Array.from(linkage_title).forEach(function(item) {
		item.classList.remove("linkageStyle");
	});
	Array.from(cityname).forEach(function(item) {
		item.style.display = "none";
	});
	linkage_title[index + 1].classList.add("linkageStyle");
	cityname[index + 1].style.display = "block";
}


//选择型号
var product_spec_options = document.querySelectorAll(".product_spec_options li")

Array.from(product_spec_options).forEach(function(item) {
	item.onclick = function() {
		Array.from(product_spec_options).forEach(function(item) {
			item.classList.remove("product_spec_style");
		})
		this.classList.add("product_spec_style");
	}
})

//产品数量
var subtractNum = document.querySelector(".subtractNum");
var addNum = document.querySelector(".addNum");
var productNum = document.querySelector(".productNum>input");

subtractNum.onclick = function() {
	productNum.value = Number(productNum.value) - 1;
	if (productNum.value < 1) {
		productNum.value = 1;
	}

}
addNum.onclick = function() {
	productNum.value = Number(productNum.value) + 1;
}

var suspension = document.querySelector(".suspension");
window.onscroll = function() {
	var scrollTop = document.documentElement.scrollTop;
	if (scrollTop > 900) {
		suspension.style.top = "0px";
	} else {
		suspension.style.top = "-70px";
	}
}

var desc = document.querySelector(".desc");
var params = document.querySelector(".params");
var active = document.querySelector(".active");
var service = document.querySelector(".service");
var consultation = document.querySelector(".consultation");

var suspension_content = document.querySelectorAll(".suspension_content li");
var particulars_tap = document.querySelectorAll(".particulars_tap li");

suspension_content[0].onclick = particulars_tap[0].onclick = function() {
	jumpfloor(desc.offsetTop - 50);
	tapnav(0);
};
suspension_content[1].onclick = particulars_tap[1].onclick = function() {
	jumpfloor(params.offsetTop - 50)
	tapnav(1);
};
suspension_content[2].onclick = particulars_tap[2].onclick = function() {
	jumpfloor(active.offsetTop - 50);
	tapnav(2);
};
suspension_content[3].onclick = particulars_tap[3].onclick = function() {
	jumpfloor(service.offsetTop - 50)
	tapnav(3);
};
suspension_content[4].onclick = particulars_tap[4].onclick = function() {
	jumpfloor(consultation.offsetTop - 50)
	tapnav(4);
};

function tapnav(index) {
	suspension_content.forEach(function(item) {
		item.classList.remove("suspension_style")
	})
	suspension_content[index].classList.add("suspension_style")
};

function jumpfloor(offsetTop) {
	var scrollTop = document.documentElement.scrollTop;
	clearInterval(time);
	var time = setInterval(function() {
		scrollTop = scrollTop - (scrollTop - offsetTop) / 3;
		if (Math.abs(scrollTop - offsetTop) < 5) {
			scrollTop = offsetTop;
			clearInterval(time);
		}
		document.documentElement.scrollTop = scrollTop;
	}, 30)
	document.documentElement.scrollTop = scrollTop;
};